<template>
  <div  class="dialogBox width_100 height_100">
    <div class="box">
        <div class="head  flex-between">
          <span class="title">{{title}}</span>
          <img class="closebtn" @click="closeEvent" src="@/assets/dialogBox/images/close.png" alt="" >
          <!-- <span class="closebtn el-icon-close" @click="closeEvent"></span> -->
        </div>
        <div class="content">
          <slot />
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'midDialogBox', // 中模态框
  props: {
    title: {
      require: String,
      default: ''
    }
  },
  methods: {
    closeEvent () {
      this.$emit('closeMidDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
    .dialogBox{
        position: fixed;
        z-index: 1998;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.49);
        .box{
          width: 760px;
          height: 592px;
          background: #FFFFFF;
          border-radius: 5px;
          position: relative;
          top: 180px;
          margin: 0 auto;
          .head{
            height: 36px;
            background: rgba(48, 78, 236, 0.03);
            .title{
              font-size: 12px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 600;
              color: #273553;
              line-height: 36px;
              padding-left: 16px;
            }
            .closebtn{
              // line-height: 40px;
              // font-size: 14px;
              height: 20px;
              margin-right: 16px;
              cursor: pointer;
            }
          }
          .content{
            height: calc(100% - 36px);
            overflow: hidden;
          }
        }
  }

</style>
